<template>
  <div style="width: 1000px;">
    <el-row :gutter="10" style="width: 100%;">
      <el-col :span="16">
        <div style="background-color: white;height: 100%;">
          <div class="setup">
            <h3 style="color: black;margin: 0 0 10px 0">消息与邮件</h3>
            <span style="font-size: 14px">私信设置/邀请设置/赞同与赞赏/关注/邮件设置</span>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">私信设置</h4>
                <span>
                  允许谁给我发私信
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">邀请/评论消息设置</h4>
                <span>
                  有人对我发出邀请时，我会收到消息通知
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">赞同/赞赏消息设置</h4>
                <span>
                  有人对我赞同或赞赏时，我会收到消息通知
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">关注消息设置</h4>
                <span>
                  我的关注有新动态时，我会收到消息通知
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">邮件设置</h4>
                <span>
                  重要事件发生时，我将会收到邮件提醒
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">收藏消息设置</h4>
                <span>
                  有人收藏我的内容时，我会收到消息通知
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

        </div>

      </el-col>
      <el-col :span="8">
        <div style="border: 1px solid #e9e9eb;background-color: white">
          <div style="height: 100%;padding: 20px">
            <h3 style="color: black;margin: 0 0 10px 0">常见问题</h3>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">消息与邮件</p>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="1.什么是陌生人私信箱？" name="1">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;陌生人私信箱可以减少陌生私信打扰，提高私信的浏览效率。<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;开启后，陌生私信将统一被放入陌生人私信箱，除非主动查看回复，该用户的私信将不会显示在私信列表。
                </div>
              </el-collapse-item>
              <el-collapse-item title="2.什么是「获取所有新回答通知」？" name="2">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;正常情况下，当一个新回答产生后，我们会按一定规则将它先发送给某些用户，根据这些用户的反馈（点赞，喜欢，没有帮助等）决定该回答后续的推送，以此确保大部分关注者可以接收到更加优质的回答。<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;获取所有新回答通知」即不经过用户反馈，直接获取全部新回答。选中后， 你会收到更多的新回答通知，但是无法得到保证回答质量。
                </div>
              </el-collapse-item>
            </el-collapse>

            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">其他问题</p>
            <p class="question">3.网站出现了问题？<span style="color: #1989fa">问题反馈</span></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

</script>

<style scoped>
.setup{
  height: 80px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;

}
.question{
  font-size: 15px;margin: 20px 0 0 0;
  color: #8493a5;
  cursor: pointer;
  font-size: 13px;
}
.question:hover{
  color: #056DE8;
}
p{
  color: #056DE8;
  cursor: pointer;
}
span{
  font-size: 14px;
}
</style>